(function () {
//    获取ul
    var jiaodian = document.getElementById('jiaodian');
//点
    var dian = document.getElementsByClassName('dian');

    for (let i = 0; i < 11; i++) {
        if (i === 5) continue;
        var li = document.createElement('li');
        li.innerHTML = `<img class='nihoa2' src="./image/index/ban_bg${(i + 1)>9?i+1:'0'+(i+1)}.png" alt="">
        <img class='nihoa' src="./image/index/banner${(i + 1)>9?i+1:'0'+(i+1)}.jpg" alt="">`
        li.style.display = 'none'
        jiaodian.appendChild(li)
    }


    // 初始状态
    jiaodian.children[0].style.display = 'block'
    dian[0].style.backgroundColor = 'rgb(0, 136, 66)'
    setTimeout(function () {
        jiaodian.children[0].children[0].style.opacity = 1;
    jiaodian.children[0].children[1].style.transform = 'scale(1)';
    }, 500)
    

    // 定时器轮播
    var index = 0;
    var timer = setInterval(lunbo,2000)

    var xiangzuo = document.getElementsByClassName('xiangzuo');

    xiangzuo[0].onclick = function () {
        clearInterval(timer);
        lunbo2()
        timer = setInterval(lunbo,2000)
    }

    xiangzuo[1].onclick = function () {
        clearInterval(timer);
        lunbo()
        timer = setInterval(lunbo,2000)
    }
    
    function lunbo() {
        jiaodian.children[index].style.display = 'none'
        dian[index].style.backgroundColor = 'rgb(181, 178, 168)'

        jiaodian.children[index].children[0].style.opacity = 0;
        jiaodian.children[index++].children[1].style.transform = 'scale(1.3)';
        if (index === 10) {
            index = 0;
        }
        jiaodian.children[index].style.display = 'block'
        dian[index].style.backgroundColor = 'rgb(0, 136, 66)'

        setTimeout(function () {
            jiaodian.children[index].children[0].style.opacity = 1;
            jiaodian.children[index].children[1].style.transform = 'scale(1)';
            
        },500)
    }

    function lunbo2() {
        jiaodian.children[index].style.display = 'none'
        dian[index].style.backgroundColor = 'rgb(181, 178, 168)'

        jiaodian.children[index].children[0].style.opacity = 0;
        jiaodian.children[index--].children[1].style.transform = 'scale(1.3)';
        if (index < 0) {
            index = 9;
        }
        jiaodian.children[index].style.display = 'block'
        dian[index].style.backgroundColor = 'rgb(0, 136, 66)'

        setTimeout(function () {
            jiaodian.children[index].children[0].style.opacity = 1;
            jiaodian.children[index].children[1].style.transform = 'scale(1)';
            
        },500)
    }


   
    for (let i = 0; i < dian.length; i++){
        dian[i].addEventListener('click',function () {
            clearInterval(timer);
            jiaodian.children[index].style.display = 'none'
            dian[index].style.backgroundColor = 'rgb(181, 178, 168)'

            jiaodian.children[index].children[0].style.opacity = 0;
            jiaodian.children[index].children[1].style.transform = 'scale(1.3)';
        
             jiaodian.children[i].style.display = 'block'
            dian[i].style.backgroundColor = 'rgb(0, 136, 66)'

            setTimeout(function () {
            jiaodian.children[i].children[0].style.opacity = 1;
            jiaodian.children[i].children[1].style.transform = 'scale(1)';
            
        }, 500)
            index =i
            timer = setInterval(lunbo,2000)
        })
        
    }


    // 
    var fenlei = document.getElementsByClassName('fenlei');
    var nav_none = document.getElementsByClassName('nav-none');
    var shuigt = document.getElementsByClassName('shuigt');
    
    
    nav_none[0].style.display = 'none'

    for (let i = 0; i < fenlei.length; i++) {
        shuigt[i].style.backgroundPosition = -i*24+'px' + ' 0px'
        fenlei[i].style.top = (i+1)*41.66+'px'
        fenlei[i].onmouseover = function () {
            fenlei[i].classList.add('mafan')
            for (let j = 0; j < nav_none.length; j++) {
            nav_none[j].style.display = 'none'
            }
            nav_none[i].style.display = 'block'
        }
        fenlei[i].onmouseout = function () {
            nav_none[i].style.display = 'none'
            fenlei[i].classList.remove('mafan')

        }
        nav_none[i].onmouseover = function () {
            this.style.display = 'block'
            fenlei[i].classList.add('mafan')

            
        }
        nav_none[i].onmouseout = function () {
            this.style.display = 'none'
            fenlei[i].classList.remove('mafan')
        }
        fenlei[i].onclick = function () {
            location.href='./../shop/shuiguo.html'
        }
        
    }

    var num = 0
    // 固定定位
    var zqu = document.getElementsByClassName('zqu')[0];
    var louceng = document.getElementsByClassName('lou-one');
    var noli = document.getElementsByClassName('noli');
    var lou_title = document.getElementsByClassName('lou_title');
    var dingwei = document.getElementById('dingwei');

    for (let i = 0; i < lou_title.length; i++) {
        noli[i].children[0].children[1].innerHTML = lou_title[i].children[1].innerHTML.trim()
        noli[i].children[0].children[0].style.backgroundPosition = `${-i*24}px 0`
        noli[i].children[0].onmouseover = function () {
            noli[i].children[0].children[0].style.opacity = '0';
            noli[i].children[0].children[1].style.display= 'block'
        }
        noli[i].children[0].onmouseout = function () {
            if(i === num) return
            noli[i].children[0].children[0].style.opacity = '1';
            noli[i].children[0].children[1].style.display= 'none'
        }
        noli[i].children[0].onclick = f1(i)
    }

    function f1(i) {
        return function (e) {
            e.preventDefault();
            noli[i].children[0].children[0].style.opacity = '1';
            noli[i].children[0].children[1].style.display = 'none'
            // if (noli[i].children[0] === this) {
            //     return
            // }
            num = i
            let a = document.documentElement.scrollTop;
            let b = louceng[i].offsetTop-200;
            let s = b - a;

            let sudu = s / 400 * 17;
            var timer = null
            console.log('a=',a,"b=",b,'s=',s,'sudu=',sudu);
            
            timer= setInterval(function () {
                if (s > 0)
                {
                    a += sudu;
                    console.log(a,b);

                    if (a > b) {
                        clearInterval(timer);
                    }
                }
                else  {
                    a += sudu;
                    console.log(a,b);
                    if (a < b) {
                        clearInterval(timer);
                    }
                }
                document.documentElement.scrollTop = a
            },17)
        }
    }

    if (document.documentElement.scrollTop-200 > zqu.offsetTop) {
        dingwei.style.display= 'block'
    } else {
        dingwei.style.display= 'none'
    }

    for (let i = 0; i < louceng.length; i++) {
        if(louceng[i].offsetTop<document.documentElement.scrollTop +300)
        {
            for (let j = 0; j < louceng.length; j++)
            {
                noli[j].children[0].children[0].style.opacity = '1';
                 noli[j].children[0].children[1].style.display= 'none'
            }
            noli[i].children[0].children[0].style.opacity = '0';
            noli[i].children[0].children[1].style.display= 'block'
        }
    }


    var gudingtop = document.getElementById('gudingtop');

    var guding = document.getElementById('guding')
    guding.onmouseover = function () {
        guding.style.backgroundPosition = '-56px -46px'
    }
    guding.onmouseout = function () {
        guding.style.backgroundPosition = '0 -46px'
    }
    if (document.documentElement.scrollTop > 290) {
        gudingtop.style.display = 'block'
        guding.style.bottom = '60px'
        
    } else {
        gudingtop.style.display = 'none'
        guding.style.bottom = '20px'
    }
    window.onscroll = function () {
        
        if (document.documentElement.scrollTop > zqu.offsetTop) {
            dingwei.style.display= 'block'
        } else {
            dingwei.style.display= 'none'
        }

        for (let i = 0; i < louceng.length; i++) {
            if(louceng[i].offsetTop<document.documentElement.scrollTop +300)
            {
                for (let j = 0; j < louceng.length; j++)
                {
                    noli[j].children[0].children[0].style.opacity = '1';
                     noli[j].children[0].children[1].style.display= 'none'
                }
                noli[i].children[0].children[0].style.opacity = '0';
                noli[i].children[0].children[1].style.display= 'block'
            }
        }
        if (document.documentElement.scrollTop > 290) {
            gudingtop.style.display = 'block'
            guding.style.bottom = '60px'
            
        } else {
            gudingtop.style.display = 'none'
            guding.style.bottom = '20px'
        }
        
    }
    
    gudingtop.onclick = function () {
        
        let a = document.documentElement.scrollTop;

        timer= setInterval(function () {
           
                a -= 500/17;
                if (a <0 ) {
                    clearInterval(timer);
                }
           
            document.documentElement.scrollTop = a
        },17)
    }
 
    
    

})()

